<template>
	
  <div id="app">
  	<div class="top">
  		<a @click='root'>查嘌呤</a>
  	</div>
  	<div class="left" v-if="check">
  		<el-menu default-active="defaultRoute" :router="true" class="el-menu-vertical-demo" theme="dark">
  		<el-submenu index="1">
            <template slot="title">微信设置</template>
            <el-menu-item index="/wechat/bind">微信绑定</el-menu-item>
            <el-menu-item index="/wechat-menu/list">菜单设置</el-menu-item>
            <el-menu-item index="/wechat/qrcode">二维码</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">食品管理</template>
          <el-menu-item index="/food/list/1">食品管理</el-menu-item>
          <el-menu-item index="/species/list">食品分类</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">站点设置</template>
          <el-menu-item index="/site/setting">seo设置</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">用户管理</template>
          <el-menu-item index="/user/password">密码修改</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">文章管理</template>
          <el-menu-item index="/article/list/1">文章列表</el-menu-item>
          <el-menu-item index="/article/add">添加文章</el-menu-item>
        </el-submenu>

    </el-menu>
  	</div>
  	<div class="right" v-if="check">
        <!--<transition name="fade" mode="out-in">-->
            <router-view></router-view>
        <!--</transition>-->
    </div>
      <div  style="width: 500px;margin:0 auto;padding-top:100px;" v-if="!check">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="username">
                  <el-input type="text" v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                  <el-input type="password" v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
    mounted() {
        this.$nextTick(function () {
            this.checkAuth(); //概况
        })
    },
    data(){

        return {
            apiUrl:apiUrl,
            check:false,
            ruleForm: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                ]
            }
        };

    },
  methods: {
      checkAuth(){
          this.$http.get(this.apiUrl + 'User/checkAuth').then(response => {
              this.check = response.data.status;
          }, response => {
              this.$message.error('加载失败');
              console.log(response);
          });
      },
      submitForm(formName) {
          this.$refs[formName].validate((valid) => {
              if (valid) {
                  var url = this.apiUrl+'User/login';
                  this.$http.post(url, this.ruleForm).then(response => {
                      console.log(response.data)
                      if(response.data.status==1){
                          this.$message.success(response.data.msg);
                          this.check=true;
                      }else{
                          this.$message.error(response.data.msg);
                      }
                      this.$refs[formName].resetFields();
                  }, response => {
                      this.$message.error('登录失败');
                      console.log(response);
                  });
              } else {
                  console.log('error submit!!');
                  return false;
              }
          });
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      root(){
        this.$router.push('/');
      }
    }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.top{height:50px;line-height: 50px;position: absolute;width:100%;z-index: 2;background-color: #324157;border-bottom: 1px solid #3b4d69;color:#fff;}
.left{position:absolute;width:200px;background-color: #324157;top: 50px;bottom:0;overflow:auto;}
.right{position:absolute;top:50px;right:0;bottom:0;left:200px;padding:20px;overflow: auto}
</style>
